<template>
  <div class="fa">
    <div class="topfa" v-if="props.isshow">
      <div style="width: 33%; text-align: center">
        <p class="onep" style="color: #e50505">{{ warnInform.warnCount }}</p>
        <p>告警</p>
      </div>
      <div style="width: 33%; text-align: center">
        <p class="onep" style="color: #0062d1">{{ warnInform.handledCount }}</p>
        <p>已解决</p>
      </div>
      <div style="width: 33%; text-align: center">
        <p class="onep" style="color: #12ad00">{{ warnInform.untreatedCount }}</p>
        <p>未解决</p>
      </div>
    </div>
    <div class="bumfa">
      <Vue3SeamlessScroll v-if="props.isshow" :list="warnInform.warnInfoList" hover :limitScrollNum="5"
        class="scroll seamless-warp" :step="0.5">
        <ul>
          <li v-for="(item, index) in warnInform.warnInfoList" :key="index" class="item">
            <span class="title">{{ item.warnTime.substring(0, 10) }}</span>
            <span class="title" style="width: 100px">{{ item.warnTime.substring(10, 16) }}</span>
            <span class="title" style="width: 120px">{{ item.iceBoxAreaName }}</span>
            <span class="title" style="width: 100px">{{ item.linkName }}</span>
            <span class="title" style="width: 100px">{{ mjue[item.warnType] }}</span>
          </li>
        </ul>
      </Vue3SeamlessScroll>
      <Vue3SeamlessScroll v-else :list="takeNotes" hover :limitScrollNum="5" class="scroll seamless-warp" :step="0.5">
        <ul>
          <li v-for="(item, index) in takeNotes" :key="index" class="item">
            <span class="title" style="width: 150px">
              <svg v-if="item.opt == '样本出库'" t="1677572377199" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="6265" width="18" height="18">
                <path
                  d="M844.205101 211.183793 713.806215 211.183793l0 74.517157 74.513064 0c20.566408 0 37.258579 16.688077 37.258579 37.254485l0 409.834132c0 20.566408-16.692171 37.254485-37.258579 37.254485L266.717597 770.044054c-20.566408 0-37.259602-16.688077-37.259602-37.254485L229.457995 322.955436c0-20.566408 16.693194-37.254485 37.259602-37.254485l74.513064 0 0-74.517157-130.399909 0c-30.867008 0-55.885821 25.018813-55.885821 55.885821l0 521.605775c0 30.867008 25.018813 55.886845 55.885821 55.886845l633.374348 0c30.871101 0 55.890938-25.019837 55.890938-55.886845L900.096039 267.069615C900.096039 236.202607 875.076202 211.183793 844.205101 211.183793L844.205101 211.183793zM528.879436 159.693072 322.603419 365.964996l54.526871 54.527894 113.131617-113.131617L490.261906 653.350308c0 15.425318 12.519128 27.945469 27.944446 27.945469l18.627243 0c15.426341 0 27.941376-12.520151 27.941376-27.945469L564.774971 291.487747l129.340787 129.320321 52.683896-52.679803L547.490306 168.799474l-4.752234 4.752234L528.879436 159.693072 528.879436 159.693072z"
                  fill="#f29621" p-id="6266"></path>
              </svg>
              <svg v-else t="1677562596824" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="10337" width="18" height="18">
                <path
                  d="M844.205101 211.183793 713.806215 211.183793l0 74.517157 74.513064 0c20.566408 0 37.258579 16.688077 37.258579 37.254485l0 409.834132c0 20.566408-16.692171 37.254485-37.258579 37.254485L266.717597 770.044054c-20.566408 0-37.259602-16.688077-37.259602-37.254485L229.457995 322.955436c0-20.566408 16.693194-37.254485 37.259602-37.254485l74.513064 0 0-74.517157-130.399909 0c-30.867008 0-55.885821 25.018813-55.885821 55.885821l0 521.605775c0 30.867008 25.018813 55.886845 55.885821 55.886845l633.374348 0c30.871101 0 55.890938-25.019837 55.890938-55.886845L900.096039 267.069615C900.096039 236.202607 875.076202 211.183793 844.205101 211.183793L844.205101 211.183793zM528.879436 658.272411l13.858636-13.858636 4.752234 4.752234 199.309348-199.328791-52.683896-52.679803L564.774971 526.477736 564.774971 164.615175c0-15.425318-12.515035-27.945469-27.941376-27.945469l-18.627243 0c-15.425318 0-27.944446 12.520151-27.944446 27.945469l0 345.989035L377.13029 397.472594l-54.526871 54.527894L528.879436 658.272411 528.879436 658.272411z"
                  fill="#6bb5de" p-id="10338" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path>
              </svg>
              {{ item.createTime }}</span>
            <span class="title" style="width: 100px">{{ item.hour }}</span>
            <span class="title" style="width: 100px">{{ item.opt }}</span>
            <span class="title" style="width: 50px">{{ item.count }}</span>
            <span class="title">{{ item.creatorId }}</span>
          </li>
        </ul>
      </Vue3SeamlessScroll>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { ref, watch } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const props = defineProps({
  type: {
    type: Number,
    default: 1,
  },
  isshow: {
    type: Boolean,
    default: false,
  },
  value: {
    type: [Number, String],
    default: 0,
  },
  takeNotes: {
    type: Array,
    default: [],
  },
  result: {
    type: Object,
    default: {},
  },
});
watch(props, (nval) => {
  sju();
});
const mjue = ['温度报警', '温度报警', '温度报警', '温度报警', '温度报警'];
const warnInform: any = ref({
  warnCount: 0,
  handledCount: 0,
  untreatedCount: 0,
  warnInfoList: [
    // {
    //   time: '2023-3-08',
    //   iceBoxAreaName: '基点冰箱1号',
    //   hour: '15.29.30',
    //   linkName: '1号冰箱',
    //   warnType: 1,
    // },
  ],
});
const sju = () => {
  warnInform.value.warnCount = props.result.warnCount
  warnInform.value.handledCount = props.result.handledCount
  warnInform.value.untreatedCount = props.result.untreatedCount
  warnInform.value.warnInfoList = props.result.warnInfoList
  console.log(props.result, 66544);
}
</script>
<style lang="less" scoped>
.fa {
  height: 220px;
  width: 100%;
  overflow: hidden;
}

.topfa {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .onep {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
  }
}

.bumfa {
  height: 190px;
  width: 100%;
  margin-top: 10px;
  overflow: hidden;

  li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.8vw;
  }
}

.seamless-warp {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  /* Other transform properties here */
}

.title {
  display: flex;
  align-items: center;
  width: 120px;
  text-align: center;
}
</style>
